<template>
  <view class="content">
    <view class="title">欢迎回来</view>
    <view>
      <!-- <u-input v-model="uname" :type="type" />
      <u-input v-model="pass" :type="type" /> -->

      <u-form :model="form" ref="uForm">
        <u-form-item label="姓名">
          <u-input
            :border-bottom="false"
            placeholder="请输入用户名"
            v-model="form.uname" />
        </u-form-item>

        <u-form-item label="密码">
          <u-input
            :border-bottom="false"
            placeholder="请输入密码"
            :password-icon="true"
            type="password"
            v-model="form.upwd" />
        </u-form-item>
      </u-form>

      <u-button @click="submit" :customStyle="{ background: '#21bbd3' }"
        >登录</u-button
      >
      <view class="footer">
        <span>注册</span>
        <span>找回密码</span>
      </view>
    </view>
  </view>
</template>

<script>
import { userLogin } from '../api/user'

export default {
  data() {
    return {
      form: {
        uname: '',
        upwd: ''
      }
    }
  },
  onLoad(option) {
    console.log('Personal 页面', option)
  },
  methods: {
    submit() {
      console.log('提交', this.form)
      this._userLogin(this.form)
    },

    _userLogin(data) {
      userLogin(data).then((res) => {
        console.log(res)
        if(res.status === 1) {
          uni.switchTab({ url: '/pages/home/home' })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .title {
    color: #21bbd3;
    font-size: 48rpx;
    float: left;
    margin: 80rpx 0;
  }

  .footer {
    display: flex;
    justify-content: space-around;
    margin-top: 80rpx;
    font-size: 30rpx;
    color: #a3a4a6;
  }
}
</style>
